<template>
	<mono-tabbar :active="1">
		<view class="chart-head" :style="{ background: bgColor }">
			<view class="data-head">
				<view class="time">{{ dayjs().format('YYYY年M月') }}</view>
				<view class="chart-head-tab" style="margin-left: auto" @click="changeType(0)"
					:class="{ active1: type === 0 }">支出</view>
				<view class="chart-head-tab" @click="changeType(1)" :class="{ active2: type === 1 }">入账</view>
			</view>
			<view class="type_h">{{ type === 0 ? '共支出' : '共入账' }}</view>
			<view class="money">
				<text class="money-icon">¥</text>
				<text class="money-num">{{ totalMoney.toFixed(2) }}</text>
			</view>
		</view>
		<view class="chart-body">
			<template v-for="(item, index) in dataListGroup" :key="index">
				<view class="chart-item">
					<view class="iconfont" :class="item.icon" :style="{ background: bgColor }"></view>
					<view class="title">{{ item.title }}</view>
					<!-- 进度条 -->
					<view class="progress-bar">
						<uv-line-progress :percentage="item.percent" :activeColor="bgColor" height="6"
							:showText="false"></uv-line-progress>
					</view>
					<view class="money">￥{{ item.totalMoney }}</view>
				</view>
			</template>
		</view>
	</mono-tabbar>
</template>
<script setup>
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import dayjs from 'dayjs';
const type = ref(0);
//颜色切换
const bgColor = computed(() => (type.value === 1 ? '#f9ae3d' : '#42b479'));
//改变原生导航栏背景颜色
const changeNavBg = (i) => {
	uni.setNavigationBarColor({
		frontColor: '#ffffff', // 必写，否则不能生效
		backgroundColor: bgColor.value,
		animation: {
			duration: 400,
			timingFunc: 'easeIn'
		}
	});
};

const activeIndex = ref(0);
const changeType = (index) => {
	activeIndex.value = 0;
	type.value = index;
	changeNavBg();
};
let totalData = [];
onLoad(() => {
	changeNavBg();
	//获取本地存储数据
	totalData = uni.getStorageSync('detailedData') || [];
});

//根据type分类
const dataList = computed(() => {
	return totalData.filter((item) => item.type === type.value);
});
//分组并计算总和
const dataListGroup = computed(() => {
	uni.showLoading({
		title: '加载中...',
		mask: true
	})
	// 设定最小百分比
	const minPercentage = 2;

	// 存储分组结果的数组
	const groupedData = [];
	// 最大支出金额
	let maxExpense = 0;

	// 用于快速查找分组的对象
	const titleIndexMap = {};
	// 使用 forEach 循环完成分组、计算总金额、找出最大支出金额
	dataList.value.forEach((item) => {
		const { title, money, icon } = item;
		const amount = parseFloat(money);
		if (isNaN(amount)) {
			return;
		}
		let groupIndex = titleIndexMap[title];
		if (groupIndex === undefined) {
			// 若该 title 还没有分组，初始化分组信息
			groupIndex = groupedData.length;
			titleIndexMap[title] = groupIndex;
			groupedData.push({
				title,
				totalMoney: amount,
				icon
			});
		} else {
			// 若该 title 已经有分组，累加总金额
			groupedData[groupIndex].totalMoney += amount;
		}
		// 更新最大支出金额
		if (groupedData[groupIndex].totalMoney > maxExpense) {
			maxExpense = groupedData[groupIndex].totalMoney;
		}
	});

	// 对总金额保留两位小数并计算百分比
	groupedData.forEach((group) => {
		group.totalMoney = parseFloat(group.totalMoney.toFixed(2));
		let percent = (group.totalMoney / maxExpense) * 100;
		if (percent < minPercentage) {
			percent = minPercentage;
		}
		group.percent = percent;
	});
	uni.hideLoading();
	return groupedData;
});

//计算总和
const totalMoney = computed(() => dataList.value.reduce((total, item) => total + parseFloat(item.money), 0));
</script>
<style lang="scss" scoped>
.chart-head {
	padding: 30rpx 40rpx;

	.data-head {
		display: flex;
		align-items: center;

		.time {
			color: #ffffff;
			font-size: 30rpx;
		}

		.active1 {
			background-color: #6ebd84 !important;
			color: #ffffff !important;
		}

		.active2 {
			background-color: #f1b749 !important;
			color: #ffffff !important;
		}

		.chart-head-tab {
			margin-left: 20rpx;
			border-radius: 4rpx;
			color: #ffffffa4;
			font-size: 26rpx;
			padding: 10rpx 18rpx;
		}
	}

	.type_h {
		margin-top: 80rpx;
		color: #f3f2f2;
		font-size: 26rpx;
	}

	.money {
		color: #ffffff;
		display: flex;
		flex-wrap: wrap;
		justify-content: start;
		align-items: center;
		line-height: 64rpx;
		margin-top: 30rpx;

		.money-icon {
			font-weight: bold;
			align-self: start;
			font-size: 48rpx;
			display: block;
		}

		.money-num {
			font-weight: bold;
			font-size: 64rpx;
			margin-left: 20rpx;
			flex: auto;
			display: block;
		}
	}
}

.chart-body {
	padding: 0 40rpx;

	.chart-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;

		.iconfont {
			border-radius: 50%;
			padding: 10rpx;
			color: #ffffff;
			font-size: 48rpx;
		}
	}

	.title {
		margin-left: 20rpx;
		font-size: 26rpx;
		width: 100rpx;
	}

	.progress-bar {
		flex: auto;
		margin-right: 10rpx;
	}

	.money {
		margin-left: auto;
		font-size: 28rpx;
		width: 180rpx;
		text-align: right;
	}
}
</style>
